import React,{Component} from 'react';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import axios from 'axios';
class MyCollection extends Component{
    constructor(props){
        super(props);
        this.state={
            list: []
        }
    }
    componentWillMount(){
        axios({
            url   : 'http://47.92.98.104:8080/zhuiying/getCollections?Uid=1',
            method: 'get'
        }).then(res=>{
            this.setState({
                list: res.data
            });
        });
    }
    showList=()=>{
       
        var lst    = this.state.list;
        var jsx    = [];
        var lstLen = lst.length;
            for(var i=0;i<lstLen;i++){
                    jsx.push(
                        <li key={i}>
                            <a href={lst[i].cplay} target="_blank">
                                <img src={lst[i].cimage}></img>
                                <p>{lst[i].cname}</p>
                                <span>收藏于{lst[i].cdate}</span>
                            </a>
                        </li>
                    )
            }
        return jsx;
    }
    render(){
        return(
            <div styleName="details_coll subdetails">
                {/*电影类*/}
                <ul styleName="clearfix mycol col_movies">
                    <h3>我的收藏夹</h3>
                    {/*
                    <li>
                        <img src='/images/user/usermovie1.png'></img>
                        <p>【传记】飞行家(2014)【莱昂纳多·迪卡普里奥】</p>
                        <span>收藏于2017-7-26</span>
        </li> */}
                {this.showList()}
                </ul>
            </div>
        )
    }
}
export default CSSModules(MyCollection, styles,{allowMultiple:true});